
<template>
  <div id="homepage">
    <div class="head">
      <div class="top">
        <a href class="location">
          <span id="city">南京市</span>
          <i class="ct2"></i>
        </a>
        <a href class="vc"></a>
      </div>
      <div class="search">
        <input type="text" placeholder="五丰香米">
        <i></i>
      </div>
      <div class="bottom">
        <div class="bottom1-box">
          <a href>全时便利</a>
          <a href>屈臣氏</a>
          <a href>沃尔玛</a>
          <a href>福临门</a>
          <a href>高钙奶</a>
          <a href>牛奶</a>
          <a href>酸奶</a>
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="scond-pic">
      <a href>
        <img src="../image/homepage/24f53d883e9bb9b1.jpg">
      </a>
    </div>
    <!-- 第三行 -->
    <div id="bar-container">
      <ul>
        <li v-for="nav in navs" :key="nav.id">
          <a href>
            <img :src="imgURL+nav.icon" alt>
            <span class="barspan">{{nav.text}}</span>
            <span class="tt">{{nav.tip}}</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- 第四行 轮播图 -->
    <div class="lubo1">
      <div class="swiper-container" id="swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="lb1 in  swipers1" :key="lb1.id">
            <img :src="imgURL+lb1.pics" alt>
          </div>
        </div>
        <!-- 分页符 -->
        <div class="swiper-pagination" id="swiper1-p"></div>
      </div>
    </div>
    <!-- 中间分隔线 -->
    <div class="Allborder"></div>
    <!-- 第五行 抢购-->
    <div class="warpper">
      <ul>
        <li>
          <a href>
            <img src="../image/homepage/bannerPic2.png" alt>
          </a>
        </li>
        <li>
          <a href>
            <img src="../image/homepage/8614f1f6629fd4c7.png" alt>
          </a>
        </li>
      </ul>
    </div>
    <!-- 第六行 -->
    <div class="warpper2">
      <ul>
        <li>
          <a href>
            <h3>思恋水饺</h3>
            <span>满49减18</span>
            <img src="../image/homepage/c7c4c260e1b0a097.png" alt>
          </a>
        </li>
        <li>
          <a href>
            <h3>益丰药房</h3>
            <span>满49减20</span>
            <img src="../image/homepage/e23e38667c727172.jpg" alt>
          </a>
        </li>
        <li>
          <a href>
            <h3>满49减15</h3>
            <span>车厘子疯抢</span>
            <img src="../image/homepage/59b7bd637a2fddea.png" alt>
          </a>
        </li>
        <li>
          <a href>
            <h3>龙眼3.9</h3>
            <span>49减30</span>
            <img src="../image/homepage/fe05b0562df26c42.jpg" alt>
          </a>
        </li>
      </ul>
    </div>
    <!-- 中间分隔线 -->
    <div class="Allborder"></div>
    <!-- 第七行 -->
    <div class="Seconds-kill">
      <div class="sk-h">
        <a href class="sk-m">更多</a>
      </div>
      <div class="sk-b">
        <div class="swiper-container" id="sw3">
          <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-visible" v-for="sw3 in swiper3" :key="sw3.id">
              <a href class="sk-b-1">
                <p class="p1">
                  <img :src="imgURL+sw3.pics" alt>
                  <span class="spp1">{{sw3.title}}</span>
                </p>
                <p class="p2">
                  ￥
                  <span class="spp2">{{sw3.sprice}}</span>
                </p>
                <p class="p3">
                  ￥
                  <span class="spp3">{{sw3.price}}</span>
                </p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间分割线 -->
    <div class="Allborder"></div>
    <!-- 第八行 -->
    <div class="pic">
      <a href>
        <img src="../image/homepage/b54f6857fa7979b9.jpg" alt>
      </a>
    </div>
    <!-- 中间分割线 -->
    <div class="Allborder"></div>
    <!-- 第九行 轮播图 -->
    <div class="lubo2">
      <div class="swiper-container" id="swiper2">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="lb2 in  swipers2" :key="lb2.id">
            <img :src="imgURL+lb2.pics" alt>
          </div>
        </div>
        <!-- 分页符 -->
        <div class="swiper-pagination" id="swiper2-p"></div>
      </div>
    </div>
    <!-- 第十行及以下 -->
    <div class="store-container">
      <div class="store-head">
        <div class="near-shop">
          <span>附近的店铺</span>
        </div>
        <ul
          class="store-body"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="busy"
          infinite-scroll-distance="100"
        >
          <!-- 第一个店家 -->
          <div v-for="shop in shops" :key="shop.id">
            <li class="st1">
              <a href="#" class="st1-1">
                <span>
                  <img :src="imgURL+shop.icon" alt>
                </span>
              </a>
              <div class="st1-2">
                <div>
                  <h2>
                    <router-link class="lin"
                      :to="{
                                          name:'shopdetails',
                                          params:{
                                            shop_id:shop.id
                                          }
                    }"
                    >{{shop.title}}</router-link>
                  </h2>
                  <span class="st1-2-1">
                    <img :src="imgURL+shop.minicon" alt>
                  </span>
                </div>
                <div class="st1-div-1">
                  <p class="st-p1">
                    <span class="st1-2-2">
                      <i></i>
                      <i></i>
                      <i></i>
                      <i></i>
                      <i></i>
                    </span>
                    <span class="scor">{{shop.score}}</span>
                  </p>
                  <p class="st-p2">{{shop.sale}}</p>
                  <p class="tk">
                    <span>{{shop.mintes}}分钟</span>
                    <span class="tk-2"></span>
                    <span>{{shop.distance}}km</span>
                  </p>
                </div>
                <div class="st1-div-2">
                  <span>起送￥{{shop.startpri}}</span>
                  <span></span>
                  <span>基础运费￥4</span>
                  <span>达达专送</span>
                </div>
                <div class="preferential">
                  <a href>
                    <ul class="preferentialf-1">
                      <li>
                        <span class="pf-1">{{shop.tip1.tp}}</span>
                        <span class="pf-2">{{shop.tip1.text}}</span>
                      </li>
                      <li>
                        <span class="pf-1 pf-3">{{shop.tip2.tp}}</span>
                        <span class="pf-2">{{shop.tip2.text}}</span>
                      </li>
                    </ul>
                  </a>
                  <div class="preferential-2">
                    <i></i>
                  </div>
                </div>
              </div>
            </li>
            <!-- 分割线 -->
            <div class="spa"></div>
          </div>
        </ul>
      </div>
    </div>
    <Appfooter active="home"></Appfooter>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
import $ from "jquery";
import Swiper from "swiper";
import infiniteScroll from "vue-infinite-scroll";

$(window).scroll(function() {
  var sv = $(this).scrollTop() / 150;
  // console.log(sv);
  $(".head").css("backgroundColor", "rgba(20,224,13," + (1 - sv) + ")");
  $(".top").css("backgroundColor", "rgba(20,224,13," + sv + ")");
});

export default {
  directives: { infiniteScroll },
  data() {
    return {
      navs: [],
      shops: [],
      swipers1: [],
      swipers2: [],
      swiper3: [],
      busy: false
    };
  },
  created() {
    this.getNavs();
    this.getswiper1();
    this.getswiper2();
    this.getswiper3();
  },
  methods: {
    getswiper3() {
      this.axios.get(`${this.apiURL}/swiper3`).then(ret => {
        let { data, error } = ret.data;
        console.log(data);
        this.swiper3 = data;
        this.$nextTick(() => {
          // 下一个UI帧再初始化swiper
          this.initSwiper3();
        });
      });
    },
    loadMore() {
      this.getShops();
    },
    getNavs() {
      this.busy = true;
      this.axios
        .get(`${this.apiURL}/pic`)
        .then(ret => {
          let { data, error } = ret.data; //es6语法结构化
          this.navs = data;
        })
        .catch();
      this.busy = false;
    },
    getShops() {
      this.axios
        .get(`${this.apiURL}/shops`)
        .then(ret => {
          let { data, error } = ret.data; //es6语法结构化
          this.shops = this.shops.concat(data);
        })
        .catch(() => {});
    },
    getswiper1() {
      this.axios
        .get(`${this.apiURL}/swiper1`)
        .then(ret => {
          let { data, error } = ret.data; //es6语法结构化
          this.swipers1 = data;
          this.$nextTick(() => {
            // 下一个UI帧再初始化swiper
            this.initSwiper();
          });
        })
        .catch(() => {});
    },
    getswiper2() {
      this.axios
        .get(`${this.apiURL}/swiper2`)
        .then(ret => {
          let { data, error } = ret.data; //es6语法结构化
          this.swipers2 = data;

          this.$nextTick(() => {
            // 下一个UI帧再初始化swiper
            this.initSwiper1();
          });
        })
        .catch(() => {});
    },

    initSwiper() {
      if (this.swiper != null) return;
      var swiper1 = new Swiper("#swiper1", {
        loop: true,
        autoplay: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        pagination: {
          el: "#swiper1-p"
          // dynamicBullets: true,
        }
      });
      console.log("123");
    },
    initSwiper1() {
      if (this.swiper != null) return;
      var swiper2 = new Swiper("#swiper2", {
        loop: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        pagination: {
          el: "#swiper2-p"
        }
      });
    },
    initSwiper3() {
      if (this.swiper != null) return;
      var swiper3 = new Swiper("#sw3", {
        slidesPerView : 4,
        // width: 20%,
        // watchSlidesProgress: true,
        // watchSlidesVisibility: true
      });
    }
  }
};
</script>
<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
// 第一行
.head {
  width: 100%px;
  height: 200px;
  position: relative;
  background-color: rgba(20, 224, 13, 1);
  .top {
    width: 750px;
    height: 76px;
    line-height: 76px;
    margin: 0 auto;
    line-height: 76px;
    font-size: 36px;
    color: #fff;
    background-color: rgba(20, 224, 13, 0);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    span {
      display: inline-block;
    }

    .location {
      padding-left: 19px;
      display: inline-block;
      line-height: 44px;
      color: #fff;
      font-weight: 500;
      #city {
        padding-left: 40px;
        line-height: 76px;
        display: inline-block;
        vertical-align: top;
        background: url(../image/homepage/index_icon_locate.png) no-repeat 0px
          20px;
        background-size: 28px;
      }
      .ct2 {
        width: 20px;
        height: 80px;
        display: inline-block;
        background: url(../image/homepage/index_icon_down.png) no-repeat center;
        background-size: 16px;
      }
    }

    .vc {
      display: block;
      width: 36px;
      height: 38px;
      background-image: url(../image/homepage/index_icon_message.png);
      background-size: 100% 100%;
      float: right;
      margin-right: 19px;
      margin-top: 18px;
    }
  }
  .search {
    position: absolute;
    top: 76px;
    width: 100%;
    input {
      width: 712.5px;
      height: 68px;
      display: block;
      margin: 0 auto;
      border: 0;
      color: #ccc;
      border-radius: 136px;
      text-align: center;
      outline: none;
      font-size: 24px;
    }
    i {
      background: url(../image/homepage/icon_swich.png) no-repeat center center;
      background-size: 30px 30px;
      width: 40px;
      height: 50px;
      position: absolute;
      z-index: 3;
      top: 10px;
      left: 280px;
    }
  }
  .bottom {
    position: absolute;
    top: 146px;
    width: 750px;

    .bottom1-box {
      height: 54px;
      width: 712.5px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      a {
        display: block;
        line-height: 54px;
        color: #fff;
        font-size: 24px;
        text-decoration: none;
        padding-left: 16px;
        padding-right: 16px;
      }
    }
  }
}
// 第二行
.scond-pic {
  img {
    width: 750px;
  }
}
#bar-container {
  width: 100%;
  ul {
    width: 712.5px;
    list-style: none;
    display: flex;
    padding-left: 0px;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: space-around;

    li {
      width: 20%;
      position: relative;

      a {
        text-decoration: none;
        font-size: 24px;
        color: #3c3c3c;
        text-align: center;
        img {
          display: block;
          width: 80px;
          height: 80px;
          margin: 0px auto;
          margin-bottom: 20px;
        }
        span {
          display: block;
        }
        .barspan {
          padding-bottom: 10px;
        }
        .tt {
          position: absolute;
          top: 0px;
          font-size: 20px;
          background-color: #ff5757;
          right: 14%;
          color: #fff;
          border-radius: 66px;
        }
      }
    }
  }
}
.lubo1 {
  height: 190px;
  width: 750px;
  #swiper1 {
    margin: 0px 20px;
    .swiper-wrapper {
      .swiper-slide {
        img {
          width: 100%;
        }
      }
    }
  }
}
.Allborder {
  height: 20px;
}
.warpper {
  ul {
    width: 712.5px;
    margin: 0px auto;
    //border:1px solid red;
    display: flex;
    justify-content: space-between;
    li {
      width: 49%;
      a {
        display: block;
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
  }
}
.warpper2 {
  ul {
    width: 712.5px;
    margin: 0px auto;
    display: flex;
    text-align: center;
    justify-content: space-around;
    li {
      width: 24%;
      background-color:#fbfbfb;
      border-right:#fff;
      span {
        display: block;
        margin-top: 10px;
        color: #ff5757;
        font-size: 24px;
      }
      h3 {
        margin-top: 26px;
        font-size: 28px;
        color: #333333;
      }
      img {
        width: 120px;
        height: 120px;
        margin-top: 20px;
      }
    }
  }
}
//第七行 抢购
.Seconds-kill {
  width: 100%;
  // 头部标题
  .sk-h {
    width: 672.5px;
    height: 40px;
    line-height: 40px;
    padding: 10px 20px;
    margin: 0 auto;
    background: url(../image/homepage/seckill-title.png) no-repeat 20px center;
    background-size: auto 40px;
    .sk-m {
      float: right;
      font-size: 24px;
      color: #ff5757;
      padding-right: 20px;
      background: url(../image/homepage/seckill-right.png) no-repeat center
        right;
      background-size: auto 16px;
    }
  }
  // 轮播部分
  .sk-b {
    width: 730px;
    height: 240px;
     margin: 10px 0px;
     padding-right:20px;
    #sw3 {
    width: 750px;
      .swiper-wrapper {
        width: 20%;
        .swiper-slide {
          width:20%;
          .sk-b-1{
            p{width:160px;
              font-size: 24px;}
            .p1{ position: relative;}
            .p2{color: #ff5757;
            width: 160px;
            text-align: center;
            font-size: 28px;}
            .p3{
            text-align: center;
            color: #999;
            padding-top: 10px;
             .spp3{text-decoration: line-through;}
            }
            img {
              width: 160px;
              height: 160px;
            }
            .spp1{
               display: block;
              height: 22px;
              width: 150px;
              line-height: 22px;
              font-size: 12px;
              border-radius: 20px;
              text-align: center;
              color: #fff;
              background-color: rgba(255, 87, 87, 0.6);
              padding: 0px 5px;
              position: absolute;
              top: 138px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .spp2{
               font-weight: bold;
            }
           
          }
        }
      }
    }
  }
}
//第八行和第九行图片
.pic {
  width: 100%;
  height: 190px;
  a {
    display: inline-block;
    margin: 0px 20px;

    img {
      width: 100%;
    }
  }
}
.lubo2 {
  height: 190px;
  width: 750px;
  #swiper2 {
    margin: 0px 20px;
    .swiper-wrapper {
      .swiper-slide {
        img {
          width: 100%;
        }
      }
    }
  }
}

// 第十行及以下
.store-container {
  width: 750px;
  .store-head {
    .near-shop {
      width: 730px;
      padding: 60px 0px 20px 20px;
      span {
        font-size: 32px;
        font-weight: bold;
        color: #333;
      }
    }
  }
  .store-body {
    //border: 1px solid red;

    .st1 {
      width: 710px;
      height: 200px;
      padding: 30px 20px;
      .st1-1 {
        display: block;
        position: absolute;
        span {
          display: block;
          width: 140px;
          height: 124px;
          img {
            width: 120px;
            height: 120px;
            border: 2px solid rgba(0, 0, 0, 0.08);
            border-radius: 8px;
          }
        }
      }
      .st1-2 {
        margin-left: 144px;
        height: 124px;
        h2 {
          font-size: 26px;
          .lin{
            color:black;
          }  
        }
        div {
          height: 40px;
          line-height: 40px;
        }
        h2 {
          display: inline-block;
        }
        .st1-2-1 {
          float: right;
          img {
            width: 36px;
            height: 40px;
          }
        }
        .st1-div-1 {
          margin-top: 10px;
          font-size: 16px;
          height: 32px;
          .st-p1 {
            display: inline-block;
            .st1-2-2 {
              i {
                display: inline-block;
                width: 20px;
                height: 20px;
                background-position: 0 0;
                background-image: url(../image/homepage/newStar.png);
                background-repeat: no-repeat;
                background-size: auto 20px;
                margin-top: 4px;
              }
              .star {
                background-position: -20px 0;
              }
              .star2 {
                background-position: -40px 0;
              }
            }
            .scor {
              color: #ffa14e;
            }
          }
          .st-p2 {
            display: inline-block;
          }
          .tk {
            color: #999;
            float: right;
            span {
              display: inline-block;
              font-size: 16px;
              line-height: 32px;
            }
            .tk-2 {
              width: 2px;
              height: 16px;
              background-color: #f5f5f5;
              margin: 0px auto;
              margin-top: 8px;
            }
          }
        }
        .st1-div-2 {
          margin-top: 10px;
          font-size: 16px;
          height: 32px;
          span {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            color: #666;
          }
          span:nth-of-type(2) {
            width: 2px;
            height: 16px;
            margin-top: 8px;
            background-color: #f5f5f5;
          }
          span:nth-of-type(4) {
            height: 20px;
            line-height: 20px;
            text-align: center;
            display: block;
            float: right;
            border: 1px solid #16a9ff;
            color: #16a9ff;
            border-radius: 8px 2px;
            margin-top: 5px;
            font-size:14px;
          }
        }
        .preferential {
          position: relative;
          .preferentialf-1 {
            li {
              height: 30px;
              margin-top: 10px;
              font-size: 16px;
              color: #666;
              line-height: 28px;
              display: flex;
            }
            .pf-1 {
              border: 1px solid #ff5757;
              background-color: #ff5757;
              display: block;
              font-size: 12px;
              color: #fff;
              padding: 0px 6px;
              font-size: 20px;
              width: 42px;
              height: 28px;
              line-height: 28px;
              border-radius: 8px 2px;
            }
            .pf-2 {
              display: block;
              width: 450px;
              height: 28px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 30px;
              text-indent: 10px;
            }
            .pf-3 {
              background-color: #55d85e;
              border: 1px solid #55d85e;
            }
          }
          .preferential-2 {
            position: absolute;
            width: 14%;
            right: 0px;
            top: 8px;
            i {
              float: right;
              display: block;
              width: 20px;
              height: 20px;
              background: url("../image/homepage/icon_arrow_down.png") no-repeat;
              background-size: 20px 14px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .spa {
      height: 2px;
      background: #ccc;
      margin-left: 144px;
    }
  }
}
//广告
.advertising {
  height: 164px;
  width: 750px;
  background: url(../image/homepage/download_2018_0408.png) no-repeat center;
  background-size: 100% auto;
  position: fixed;
  bottom: 100px;
  z-index: 10
}
</style>


